<template>
	<view class="container">
		<uni-card class="card" v-for="item in myNotificationList" sub-title="11" :key="item.id" :is-shadow="false">
			<view class="uni-body" v-html="getHighlightedText(item.content)"></view>
			<view style="color: chocolate" slot="actions" class="card-actions">
				{{ $dayjs(item.createTime).format('YYYY年MM月DD日 HH:mm') }}
			</view>
		</uni-card>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { queryNotification } from '../../api/user';
import { onShow, onLoad } from '@dcloudio/uni-app';
const userId = ref(0);
const myNotificationList = ref([]);
onLoad((options) => {
	userId.value = options.id;
});
const getHighlightedText = (content) => {
	// 正则表达式匹配企业名称
	const regex = /-(.*?)\-/;
	const match = content.match(regex);
	if (match) {
		return content.replace(match[1], `<text style="color: blue">${match[1]}</text>`);
	}
	return content;
};

const notification = async () => {
	const res = await queryNotification({
		userId: userId.value
	});

	myNotificationList.value = res.data;
};

onShow(() => {
	notification();
});
</script>

<style lang="scss" scoped>
.card {
	display: flex;
}
</style>
